<template>
  <div id="app" class="dark-mode-demo">
    <!-- 页面头部 -->
    <el-header class="demo-header">
      <div class="header-content">
        <h1>Element UI 深夜模式演示 (默认深夜模式)</h1>
        <div class="header-actions">
          <!-- 深夜模式切换按钮 -->
          <el-button 
            :icon="isDarkMode ? 'el-icon-sunny' : 'el-icon-moon'" 
            @click="toggleDarkMode"
            type="primary"
            size="small"
          >
            {{ isDarkMode ? '切换浅色模式' : '切换深夜模式' }}
          </el-button>
          
          <!-- 自动模式切换 -->
          <el-button 
            @click="toggleAutoMode"
            :type="isAutoMode ? 'success' : 'info'"
            size="small"
          >
            {{ isAutoMode ? '关闭自动模式' : '开启自动模式' }}
          </el-button>
        </div>
      </div>
    </el-header>

    <!-- 主要内容区域 -->
    <el-main class="demo-main">
      <!-- 主题信息卡片 -->
      <el-card class="info-card">
        <div slot="header">
          <span>当前主题信息</span>
        </div>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="深夜模式状态">
            <el-tag :type="isDarkMode ? 'success' : 'info'">
              {{ isDarkMode ? '已启用' : '已禁用' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="自动模式">
            <el-tag :type="isAutoMode ? 'success' : 'info'">
              {{ isAutoMode ? '已开启' : '已关闭' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="本地存储">
            <el-tag type="warning">{{ storageInfo }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="初始化状态">
            <el-tag type="warning">{{ themeInfo.initialized ? '已初始化' : '未初始化' }}</el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 组件演示区域 -->
      <div class="components-demo">
        <!-- 基础组件演示 -->
        <el-card class="demo-card">
          <div slot="header">
            <span>基础组件</span>
          </div>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <h4>按钮组件</h4>
              <el-button>默认按钮</el-button>
              <el-button type="primary">主要按钮</el-button>
              <el-button type="success">成功按钮</el-button>
              <el-button type="warning">警告按钮</el-button>
              <el-button type="danger">危险按钮</el-button>
            </el-col>
            
            <el-col :span="12">
              <h4>输入框组件</h4>
              <el-input v-model="inputValue" placeholder="请输入内容"></el-input>
              <el-input v-model="inputValue2" placeholder="禁用状态" disabled style="margin-top: 10px;"></el-input>
            </el-col>
          </el-row>
        </el-card>

        <!-- 表单组件演示 -->
        <el-card class="demo-card">
          <div slot="header">
            <span>表单组件</span>
          </div>
          
          <el-form :model="form" label-width="80px">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="用户名">
                  <el-input v-model="form.username"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="邮箱">
                  <el-input v-model="form.email" type="email"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="性别">
                  <el-radio-group v-model="form.gender">
                    <el-radio label="male">男</el-radio>
                    <el-radio label="female">女</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="爱好">
                  <el-checkbox-group v-model="form.hobbies">
                    <el-checkbox label="reading">阅读</el-checkbox>
                    <el-checkbox label="music">音乐</el-checkbox>
                    <el-checkbox label="sports">运动</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
            </el-row>
            
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="城市">
                  <el-select v-model="form.city" placeholder="请选择城市">
                    <el-option label="北京" value="beijing"></el-option>
                    <el-option label="上海" value="shanghai"></el-option>
                    <el-option label="广州" value="guangzhou"></el-option>
                    <el-option label="深圳" value="shenzhen"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="日期">
                  <el-date-picker v-model="form.date" type="date" placeholder="选择日期"></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            
            <el-form-item label="开关">
              <el-switch v-model="form.switch"></el-switch>
            </el-form-item>
            
            <el-form-item label="评分">
              <el-rate v-model="form.rating"></el-rate>
            </el-form-item>
            
            <el-form-item label="滑块">
              <el-slider v-model="form.slider" :max="100"></el-slider>
            </el-form-item>
          </el-form>
        </el-card>

        <!-- 数据展示组件演示 -->
        <el-card class="demo-card">
          <div slot="header">
            <span>数据展示组件</span>
          </div>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <h4>表格组件</h4>
              <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="age" label="年龄"></el-table-column>
                <el-table-column prop="city" label="城市"></el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
            
            <el-col :span="12">
              <h4>标签组件</h4>
              <el-tag>默认标签</el-tag>
              <el-tag type="success">成功标签</el-tag>
              <el-tag type="info">信息标签</el-tag>
              <el-tag type="warning">警告标签</el-tag>
              <el-tag type="danger">危险标签</el-tag>
              
              <h4 style="margin-top: 20px;">进度条组件</h4>
              <el-progress :percentage="50"></el-progress>
              <el-progress :percentage="80" status="success"></el-progress>
              <el-progress :percentage="100" status="exception"></el-progress>
            </el-col>
          </el-row>
        </el-card>

        <!-- 导航组件演示 -->
        <el-card class="demo-card">
          <div slot="header">
            <span>导航组件</span>
          </div>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <h4>标签页组件</h4>
              <el-tabs v-model="activeTab">
                <el-tab-pane label="用户管理" name="first">
                  <div>用户管理内容</div>
                </el-tab-pane>
                <el-tab-pane label="配置管理" name="second">
                  <div>配置管理内容</div>
                </el-tab-pane>
                <el-tab-pane label="角色管理" name="third">
                  <div>角色管理内容</div>
                </el-tab-pane>
              </el-tabs>
            </el-col>
            
            <el-col :span="12">
              <h4>面包屑组件</h4>
              <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>活动管理</el-breadcrumb-item>
                <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                <el-breadcrumb-item>活动详情</el-breadcrumb-item>
              </el-breadcrumb>
              
              <h4 style="margin-top: 20px;">分页组件</h4>
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400">
              </el-pagination>
            </el-col>
          </el-row>
        </el-card>

        <!-- 反馈组件演示 -->
        <el-card class="demo-card">
          <div slot="header">
            <span>反馈组件</span>
          </div>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <h4>消息提示</h4>
              <el-button @click="showMessage">显示消息</el-button>
              <el-button @click="showSuccessMessage">成功消息</el-button>
              <el-button @click="showWarningMessage">警告消息</el-button>
              <el-button @click="showErrorMessage">错误消息</el-button>
            </el-col>
            
            <el-col :span="12">
              <h4>通知组件</h4>
              <el-button @click="showNotification">显示通知</el-button>
              <el-button @click="showSuccessNotification">成功通知</el-button>
              <el-button @click="showWarningNotification">警告通知</el-button>
              <el-button @click="showErrorNotification">错误通知</el-button>
            </el-col>
          </el-row>
          
          <el-row :gutter="20" style="margin-top: 20px;">
            <el-col :span="12">
              <h4>警告框</h4>
              <el-alert title="成功提示的文案" type="success"></el-alert>
              <el-alert title="消息提示的文案" type="info" style="margin-top: 10px;"></el-alert>
              <el-alert title="警告提示的文案" type="warning" style="margin-top: 10px;"></el-alert>
              <el-alert title="错误提示的文案" type="error" style="margin-top: 10px;"></el-alert>
            </el-col>
            
            <el-col :span="12">
              <h4>对话框</h4>
              <el-button @click="showDialog">打开对话框</el-button>
              <el-button @click="showConfirm">确认对话框</el-button>
            </el-col>
          </el-row>
        </el-card>
      </div>
    </el-main>

    <!-- 对话框 -->
    <el-dialog title="深夜模式信息" :visible.sync="dialogVisible" width="30%">
      <span>这是一个深夜模式下的对话框示例</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'DarkModeDemo',
  data() {
    return {
      // 深夜模式状态
      isDarkMode: false,
      isAutoMode: false,
      themeInfo: {},
      
      // 表单数据
      inputValue: '',
      inputValue2: '',
      form: {
        username: '',
        email: '',
        gender: 'male',
        hobbies: [],
        city: '',
        date: '',
        switch: false,
        rating: 0,
        slider: 50
      },
      
      // 表格数据
      tableData: [
        { name: '张三', age: 25, city: '北京' },
        { name: '李四', age: 30, city: '上海' },
        { name: '王五', age: 28, city: '广州' }
      ],
      
      // 标签页
      activeTab: 'first',
      
      // 分页
      currentPage: 1,
      
      // 对话框
      dialogVisible: false
    };
  },
  
  computed: {
    // 存储信息
    storageInfo() {
      try {
        const stored = localStorage.getItem('element-ui-dark-mode');
        return stored === 'true' ? '已存储深夜模式' : '已存储浅色模式';
      } catch (error) {
        return '无法访问本地存储';
      }
    }
  },
  
  mounted() {
    // 初始化深夜模式
    this.initDarkMode();
    
    // 监听深夜模式变化
    this.$darkMode.onDarkModeChange(this.handleDarkModeChange);
  },
  
  beforeDestroy() {
    // 移除事件监听
    this.$darkMode.offDarkModeChange(this.handleDarkModeChange);
  },
  
  methods: {
    // 初始化深夜模式
    initDarkMode() {
      this.$darkMode.init();
      this.updateDarkModeStatus();
    },
    
    // 切换深夜模式
    toggleDarkMode() {
      this.$darkMode.toggle();
      this.updateDarkModeStatus();
    },
    
    // 切换自动模式
    toggleAutoMode() {
      if (this.isAutoMode) {
        this.isAutoMode = false;
        this.$message.info('已关闭自动模式');
      } else {
        this.isAutoMode = true;
        this.$darkMode.autoSwitch();
        this.$message.success('已开启自动模式');
      }
    },
    
    // 更新深夜模式状态
    updateDarkModeStatus() {
      this.isDarkMode = this.$darkMode.isEnabled();
      this.themeInfo = this.$darkMode.getThemeInfo();
    },
    
    // 处理深夜模式变化
    handleDarkModeChange(event) {
      this.updateDarkModeStatus();
      const message = event.type === 'darkModeEnabled' ? '深夜模式已启用' : '深夜模式已禁用';
      this.$message.success(message);
    },
    
    // 表格操作
    handleEdit(index, row) {
      this.$message.info(`编辑第${index + 1}行数据: ${row.name}`);
    },
    
    handleDelete(index, row) {
      this.$message.warning(`删除第${index + 1}行数据: ${row.name}`);
    },
    
    // 分页操作
    handleSizeChange(val) {
      this.$message.info(`每页显示 ${val} 条`);
    },
    
    handleCurrentChange(val) {
      this.$message.info(`当前页: ${val}`);
    },
    
    // 消息提示
    showMessage() {
      this.$message('这是一条消息提示');
    },
    
    showSuccessMessage() {
      this.$message.success('这是一条成功消息');
    },
    
    showWarningMessage() {
      this.$message.warning('这是一条警告消息');
    },
    
    showErrorMessage() {
      this.$message.error('这是一条错误消息');
    },
    
    // 通知
    showNotification() {
      this.$notify({
        title: '标题',
        message: '这是一条通知消息'
      });
    },
    
    showSuccessNotification() {
      this.$notify({
        title: '成功',
        message: '这是一条成功的通知消息',
        type: 'success'
      });
    },
    
    showWarningNotification() {
      this.$notify({
        title: '警告',
        message: '这是一条警告的通知消息',
        type: 'warning'
      });
    },
    
    showErrorNotification() {
      this.$notify({
        title: '错误',
        message: '这是一条错误的通知消息',
        type: 'error'
      });
    },
    
    // 对话框
    showDialog() {
      this.dialogVisible = true;
    },
    
    showConfirm() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message.success('删除成功!');
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    }
  }
};
</script>

<style scoped>
.dark-mode-demo {
  min-height: 100vh;
  background-color: #f5f7fa;
  transition: all 0.3s ease-in-out;
}

.dark-mode-demo.dark-mode {
  background-color: #1a1a1a;
  color: #ffffff;
}

.demo-header {
  background-color: #ffffff;
  border-bottom: 1px solid #e4e7ed;
  padding: 0;
  transition: all 0.3s ease-in-out;
}

.dark-mode .demo-header {
  background-color: #2a2a2a;
  border-bottom-color: #404040;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 20px;
}

.header-content h1 {
  margin: 0;
  color: #303133;
  transition: color 0.3s ease-in-out;
}

.dark-mode .header-content h1 {
  color: #ffffff;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.demo-main {
  padding: 20px;
  transition: all 0.3s ease-in-out;
}

.info-card {
  margin-bottom: 20px;
  transition: all 0.3s ease-in-out;
}

.components-demo {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.demo-card {
  transition: all 0.3s ease-in-out;
}

.demo-card h4 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #303133;
  transition: color 0.3s ease-in-out;
}

.dark-mode .demo-card h4 {
  color: #ffffff;
}

/* 深夜模式下的特殊样式调整 */
.dark-mode .el-card {
  background-color: #2a2a2a !important;
  border-color: #404040 !important;
  color: #ffffff !important;
}

.dark-mode .el-card__header {
  background-color: #2a2a2a !important;
  border-bottom-color: #404040 !important;
  color: #ffffff !important;
}

.dark-mode .el-descriptions__label {
  background-color: #2a2a2a !important;
  color: #b0b0b0 !important;
}

.dark-mode .el-descriptions__content {
  color: #ffffff !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    gap: 15px;
    padding: 15px 20px;
  }
  
  .header-actions {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .demo-main {
    padding: 15px;
  }
  
  .el-col {
    margin-bottom: 20px;
  }
}
</style> 